<!-- 彩票规则 -->
<template>
  <div>
      <backHeader title='彩票规则'></backHeader>
      <van-tabs v-model="active" animated :ellipsis='false' class='rulesTab' :line-width="125">
        <van-tab :title="tab.title" v-for="(tab,index) in tabList" :key='index'>
            <div class="list">
                <pre class='desc'>{{tab.desc}}</pre>
                <div class="type" v-for='(tabText,index) in tab.tabTexts' :key="index">
                    <div class="title">{{tabText.text}}</div>
                    <div class="content">{{tabText.content}}</div>
                </div>
            </div>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import backHeader from '../../components/backHeader'
export default {
  name: 'rules',
  props: [],
  components: {
    backHeader
  },
  data () {
    return {
      tabList: [{
        title: '一分快3',
        desc:'极速快3每3分钟开一次奖,每天开奖480期。',
        tabTexts:[{
          text:'大小骰宝，三军1-6',
          content:'表示任何一粒骰子出现相应数字之平面点数（开出1-3骰赔率不同）'
        },{
          text:'大小骰宝，三军大小，总和大',
          content:'三粒骰子点数总和为11点至17点；注：若三粒骰子平面点数相同，通吃「大」、「小」各注。'
        },{
          text:'大小骰宝，三军大小，总和小',
          content:'三粒骰子点数总和为4点至10点；注：若三粒骰子平面点数相同，通吃「大」、「小」各注。'
        },{
          text:'大小骰宝，三军大小，总和单',
          content:'三粒骰子点数总和为单数；注：若三粒骰子平面点数相同，通吃「单」、「双」各注。'
        }],
      }, {
        title: '广东快3',
        desc:'广东快3每6分钟开一次奖,每天开奖240期。',
        tabTexts:[{
          text:'大小骰宝，三军1-6',
          content:'表示任何一粒骰子出现相应数字之平面点数（开出1-3骰赔率不同）'
        },{
          text:'大小骰宝，三军大小，总和大',
          content:'三粒骰子点数总和为11点至17点；注：若三粒骰子平面点数相同，通吃「大」、「小」各注。'
        },{
          text:'大小骰宝，三军大小，总和小',
          content:'三粒骰子点数总和为4点至10点；注：若三粒骰子平面点数相同，通吃「大」、「小」各注。'
        },{
          text:'大小骰宝，三军大小，总和单',
          content:'三粒骰子点数总和为单数；注：若三粒骰子平面点数相同，通吃「单」、「双」各注。'
        },{
          text:'大小骰宝，三军大小，总和双',
          content:'三粒骰子点数总和为双数；注：若三粒骰子平面点数相同，通吃「单」、「双」各注。'
        },{
          text:'大小骰宝，围骰',
          content:'三粒骰子平面均与选定点数相同'
        }],
      }, {
        title: '香港快3'
      }, {
        title: '台湾快3'
      }, {
        title: '急速快3'
      }, {
        title: '幸运快3'
      }, {
        title: '十分六合彩'
      }, {
        title: '急速时时彩'
      }, {
        title: '急速快乐十分'
      }, {
        title: '传统江苏快3'
      }, {
        title: '传统上海快3'
      }, {
        title: '传统安徽快3'
      }, {
        title: '传统河北快3'
      }, {
        title: '传统广西快3'
      }, {
        title: '传统甘肃快3'
      }, {
        title: '传统湖北快3'
      }, {
        title: '传统北京快3'
      }, {
        title: '澳门快3'
      }, {
        title: '极速赛车'
      }, {
        title: '极速飞艇'
      }, {
        title: '传统重庆时时彩'
      }, {
        title: '传统北京赛车'
      }, {
        title: '传统江西快3'
      }, {
        title: '香港六合彩'
      }],
      active: 0
    }
  },
  mounted(){
    
  },
  computed: {},
  methods: {}
}

</script>
<style lang='less' scoped>
.list {
  height: calc(100vh - 102px);
    -ms-flex: 1 1;
    flex: 1 1;
    overflow: scroll;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px;
    font-size: 13px;
    background-color:#fff;
}
.list .desc {
    color: #777;
    line-height: 52px;
    white-space: pre-wrap;
    line-height: 1.5;
    margin-bottom:20px
}
.list .type {
    margin-bottom: 20px;
}
.list .type .title {
    color: #661dac;
    margin-bottom: 4px;
    padding: 8px 0 8px 8px;
    font-size: 13px;
    background-color: #f3f3f3;
}
.list .type .content {
    color: #777;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    line-height: 16px;
    padding: 6px 12px;
    font-family: serif;
}
</style>
